Day23 切版筆記- 人員介紹卡片

2021 iThome 鐵人賽

DAY 23

自我挑戰組

文組視角的初學前端筆記系列第 23 篇

13th鐵人賽

ptsai129

2021-09-23 17:45:08

568 瀏覽

分享至

運用到的觀念

border搭配偽元素製作出三角形區塊
絕對定位&相對定位
用:hover 搭配transform、transition作出互動效果
盒模型觀念
用:hover 搭配background-image/color、transition作出互動效果
flex

HTML結構

先做一個wrap區塊
裡面包三個item區塊
item裡面有圖片和文字
文字另外用一個txt區塊包起來

<div class="wrap">
    <div class="item">
        <img src="https://picsum.photos/300/300?random=10">
        <div class="txt">
            <h2>小寶</h2>
            <p>
                古代人相信將瑪爾濟斯放在身上不舒服的地方可以幫助症狀緩和，因此有療效之意。緋尼基人航行到馬爾他島，他們所帶來的犬種在幾經配種繁衍後，產生了馬爾濟斯種，是最古老的賞玩犬種之一。馬爾濟斯的祖先大約在古羅馬時代就已被引進到歐洲，馬爾濟斯犬並不被當作看家犬，而是王公貴族等上流階級的寵物。</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/300/300?random=20">
        <div class="txt">
            <h2>大寶</h2>
            <p>迷你雪納瑞是雪納瑞家族中的小型犬種，於19世紀中後期產於德國。吃苦耐勞、反應機敏、又活力充沛的小型犬。迷你雪納瑞是由標準雪納瑞和許多小型犬，包括貴賓犬 、迷你杜賓犬或是艾芬篤賓犬配種衍生而來。
迷你雪納瑞最讓人熟悉的是他們友善的個性和調皮又充滿活力，他們對主人是非常的忠心並保護。</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/300/300?random=30">
        <div class="txt">
            <h2>二寶</h2>
            <p>台灣犬，又稱臺灣土犬、福爾摩莎犬、國寶犬、高沙犬，台灣犬是犬隻品種，屬於馴化動物，臺灣培育之犬科動物（不是原生種動物），最早起源自臺灣高海拔地區原住民飼養的獵犬，是南亞狩獵犬的後代。牠們非常適應台灣崎嶇不平的地形，現在大多作為狩獵犬、護衛犬、特技犬、搜救犬、或者是陪伴犬。</p>
        </div>
    </div>
</div>

CSS結構

1.CSS Reset&設定wrap區塊和item區塊寬度

*{
  margin:0;
  padding:0; 
  list-style: none;
}
.wrap{
  width:1200px;
  display:flex;
  margin: auto; 
}

.item{
  width:370px; /*盒模型概念 370+15左margin+15右margin=400px*/
  margin:15px; 
}

處理圖片多出來的空白處
將圖片設定會填滿item寬度
並設定verticla-align:middle將下方多出來的區塊消除

.item img{
  width:100%;
  vertical-align: middle;
}

設定item區塊內的文字置中排列

.item{
   width:370px; 
   margin:15px;
   text-align: center;
   }

再h2下新增一個底線
p段落新增行距

.item h2{
  border-bottom: 1px solid #888; 
  padding-bottom: .3em;
  margin-bottom: .4em;
  }
 
.item p{
  line-height: 1.6;
}

載入google fonts字體到html的head內

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>鐵人賽Day23</title>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500;700;900&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./styles/style.css">
</head>

新增字體設定到css
h2, p新增font-weight

*{
  margin:0;
  padding:0; 
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}


.item h2{
  border-bottom: 1px solid #888; 
  padding-bottom: .3em;
  margin-bottom: .4em;
  font-weight: 900;
}

.item p{
  line-height: 1.6;
  font-weight: 300;
}

將wrap區塊設定成垂直置中，並設定背景顏色
將item區塊背景設為白色和新增框線
txt文字區塊設定內距

html ,body{
  height:100%;
}

body{
  display: flex;
  align-items: center;
  background-color: #003;
}


.item{
   width:368px; /*盒模型概念 368+15px左margin+15px右margin+1px左border+1px右border=400px*/
   margin:15px; 
   text-align: center;
   background-color: #fff;  
   border: 1px solid #ccc;
   }
   
.item .txt{
  padding: 20px;
 }

使用偽元素::before和邊框線製做出三角型區塊
border-top設定三角形的角度
border-left和border-right的寬度是item寬度368px除以二，所以是184px

.item .txt::before{
  content:'';
  width:0;
  height:0; 
  border-top: 50px solid #f00;
  border-left: 184px solid #0f0;
  border-right: 184px solid #0f0;
}

7.使用絕對定位和相對定位將三角形區塊固定在txt區塊內
在txt區塊設定 position:relative;

 .item .txt{
  padding: 20px;
  position:relative;
 }

.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid #f00;
  border-left: 184px solid #0f0;
  border-right: 184px solid #0f0;
}

將border-top顏色改為透明

.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid transparent;
  border-left: 184px solid #0f0;
  border-right: 184px solid #0f0;
}

把border-left和border-right顏色改成白色

.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid transparent;
  border-left: 184px solid #fff;
  border-right: 184px solid #fff;
}

設定transform
將整個三角形區塊往上移

.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid transparent;
  border-left: 184px solid #fff;
  border-right: 184px solid #fff;
  transform:translateY(-100%); 
}

使用:hover、transform和transition做出滑鼠碰到item區塊就會往上移動的效果

.item:hover{
  transform: translateY(-50px);
}

.item{
   width:368px; 
  margin:15px; 
  text-align: center;
  background-color: #fff;  
  border: 1px solid #ccc;
  transform:translateY(0px); 
  transition:.5s;
}

設定三角形區塊也會在滑鼠碰到item區塊時換顏色

.item:hover .txt::before{
  border-left: 184px solid #FEB85D;
  border-right: 184px solid #FEB85D;
}

10: 設定滑鼠碰到item區塊時，txt區塊的背景顏色和文字顏色和底線會變色的效果

.item h2{
  border-bottom: 1px solid #888; 
  padding-bottom: .3em;
  margin-bottom: .4em;
  font-weight: 900;
  transition:.25s; 
}

.item p{
  line-height: 1.6;
  font-weight: 300;
  transition:.25s; 
}
.item:hover .txt{
  background-image: linear-gradient(0deg, #FB8076, #FEB85D);
}

.item:hover h2{
  color:#fff;
  border-bottom-color: #fff;

}
.item:hover p{
  color:#fff;
}

css完整結構

*{
  margin:0;
  padding:0; 
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}

html ,body{
  height:100%;
}

body{
  display: flex;
  align-items: center;
  background-color: #003;
}


.wrap{
  width:1200px;
  display:flex;
  margin: auto; 
}

.item{
   width:368px; 
  margin:15px; 
  text-align: center;
  background-color: #fff;  
  border: 1px solid #ccc;
  transform:translateY(0px); 
  transition:.5s;
}

.item img{
  width:100%;
  vertical-align: middle;
}

.item h2{
  border-bottom: 1px solid #888; 
  padding-bottom: .3em;
  margin-bottom: .4em;
  font-weight: 900;
  transition:.25s; 
}

.item p{
  line-height: 1.6;
  font-weight: 300;
  transition:.25s; 
}
   
 .item .txt{
  padding: 20px;
  position:relative;
 }

  
.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid transparent;
  border-left: 184px solid #fff;
  border-right: 184px solid #fff;
  transform:translateY(-100%);
}

.item:hover .txt::before{
  border-left: 184px solid #FEB85D;
  border-right: 184px solid #FEB85D;
}

.item:hover{
  transform: translateY(-50px);
}

.item:hover .txt{
  background-image: linear-gradient(0deg, #FB8076, #FEB85D);
}


.item:hover h2{
  color:#fff;
  border-bottom-color: #fff;

}
.item:hover p{
  color:#fff;
}

以上為個人學習筆記整理
若有錯誤，歡迎指正

參考資料:金魚都能懂的這個網頁畫面怎麼切 : 人員介紹卡片